<template>
  <SearchForm
    :searchData="pagination"
    @handleSearch="handleSearch"
    @handleReset="handleReset"
  >
  </SearchForm>
  <TableList
    :data="data"
    :total="total"
    :stripe="stripe"
    :bordered="bordered"
    :hover="hover"
    :tableLayout="tableLayout"
    :size="size"
    :showHeader="showHeader"
    :pagination="pagination"
    @onChange="onChange"
    @handlerBuild="handlerBuild"
    @handlerEdit="handlerEdit"
    @handleDelete="handleDelete"
    @handleStatus="handleStatus"
  ></TableList>

  <DialogForm
    ref="handleClear"
    :visible="visibleform"
    :title="title"
    :data="formBaseData"
    @handleClose="handleClose"
    @handleAdd="handleAdd"
    @handleEdit="handleEditForm"
  >
  </DialogForm>

  <!-- 删除弹框 -->
  <Index
    :visible="visibleDelete"
    @handleClose="handleDeleteClose"
    @handleDelete="handleDeleteSure"
  >
  </Index>

  <!-- 禁用启用弹框 -->
  <Forbidden
    :visibleStatus="visibleStatus"
    @handleClose="handleStatusClose"
    @handleSubmit="handleSubmit"
  >
  </Forbidden>
</template>

<script setup lang="jsx">
import { onMounted, ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import {
  getProjectList,
  projectAdd,
  getProjectDetails,
  projectUpdate,
  projectDelete,
  projectStatus
} from '@/api/serve'
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import Index from '@/components/OperateDialog/index.vue'
import Forbidden from '@/components/Forbidden/index.vue'

const data = ref([])
const total = ref(0)
const stripe = ref(true)
const bordered = ref(true)
const hover = ref(false)
const tableLayout = ref(false)
const size = ref('medium')
const showHeader = ref(true)
const pagination = ref({
  pageNum: 1,
  pageSize: 10
})
// 定义title变量 用来区分弹框类型
const title = ref('')
// 表单展示数据
const formBaseData = ref({})

// 定义visibleform 初始值
const visibleform = ref(false)

// 子组件向父组件传递方法对象
const handleClear = ref({})

// 定义删除的visbale
const visibleDelete = ref(false)

// 定义禁用的visbale
const visibleStatus = ref(false)

// 新增弹框
const handlerBuild = () => {
  title.value = '新增'
  // 打开弹框去清理表达那
  handleClear.value.handleClear()
  visibleform.value = true
}

// 编辑的弹框
const handlerEdit = (val) => {
  title.value = '编辑'
  visibleform.value = true
  // 弹框进行查询的回写
  handlebyid(val)
}

// 取消弹框
const handleClose = () => {
  visibleform.value = false
}

// 定义一个确定方法
const handleAdd = async (val) => {
  debugger
  const res = await projectAdd(val)
  if (res.code == 200) {
    MessagePlugin.success('新增成功')
    handleClose()
    getlist()
  }
}

// 编辑的确定按钮
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  debugger
  if (res.code == 200) {
    MessagePlugin.success('编辑成功')
    handleClose()
    getlist()
  }
}

// 定义一个编辑数据回写
const handlebyid = async (val) => {
  debugger
  const res = await getProjectDetails(val)
  formBaseData.value = res.data
}

//= ====================================================
// 删除弹框
const idValue = ref()

const handleDelete = (id) => {
  debugger
  visibleDelete.value = true
  idValue.value = id
}

const handleDeleteClose = () => {
  visibleDelete.value = false
}

const handleDeleteSure = async () => {
  const res = await projectDelete(idValue.value)
  if (res.code == 200) {
    MessagePlugin.success('删除成功')
    handleDeleteClose()
    getlist()
  }
}
//= ========================================================
// 禁用弹框
const rowStatus = ref({})
const handleStatus = (row) => {
  debugger
  visibleStatus.value = true
  rowStatus.value = row
}

const handleStatusClose = () => {
  visibleStatus.value = false
}

// 点击禁用的确定按钮
const handleSubmit = async () => {
  const res = await projectStatus(rowStatus.value)
  if (res.code == 200) {
    MessagePlugin.success('禁用成功')
    handleStatusClose()
    getlist()
  }
}

// 定义初始化加载的一个方法created 或者mounted()
onMounted(() => {
  getlist()
})

const getlist = async () => {
  // vue3获取对象的属性值都要.value
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = res.data.total
}

// 实现下一页
const onChange = (pageInfo) => {
  pagination.value.pageNum = pageInfo.current
  getlist()
}

const handleSearch = () => {
  getlist()
}

// 重置查询
const handleReset = () => {
  // pagination.value.pageNum = 1
  // pagination.value.pageSize = 10
  // pagination.value.name = ''
  // pagination.value.status=''
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getlist()
}
</script>
